<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
      <link href="css/forms.css" rel="stylesheet">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <style>
      .client-info{
          margin-top: -30px;
      }
      .goods_name{
          color: black;
          font-weight: lighter;
      }
  </style>
  <body>
    <div id="app" class="page">
      <!-- Main Navbar-->
        @component(shop/header)
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
          @component(shop/common/slide_nav)
        <div class="content-inner">
          <!-- Page Header-->
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">Titang</h2>
            </div>
          </header>
          <!-- Breadcrumb-->
          <div class="breadcrumb-holder container-fluid">
            <ul class="breadcrumb">
              <li class="breadcrumb-item"><a href="/shop/index">Home</a></li>
              <li class="breadcrumb-item active">goods           </li>
            </ul>
          </div>
            <div class="container-fluid">
                <button type="button" class="btn-sm btn-success show_catalog"><i class="fa fa-bars" aria-hidden="true"></i></button>
                <div class="row col-md-10 col-xs-12 catalog-parent" style="height: 300px;overflow-y: scroll;position: absolute;z-index:999;">
                    <ul>
                    @foreach($catalog as $key=>$item)
                    <li class="parents">
                        {{$key}}
                    </li>
                    @endforeach
                    </ul>
                    <ul v-if="show_key!=null">
                        <li v-for="i in children[show_key]" style="display: flex;">
                            <a href='javascript:void(0)' @click="query(i['name'])">@{{i['name']}}>
                            </a>
                            <ul class="show_children">
                                <li style="width: 100px;" v-for="k in i['children']" @click="query(k['name'])">@{{k['name']}}</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
          <!-- Forms Section-->
            <div class="container-fluid">
              <div class="row">
                  @foreach($page['data'] as $key=>$value)
                  <div class="col-xl-3 col-sm-4">
                      <div class="card-body text-center">
                          <div class="client-avatar"><img src="{{$value['img']}}" alt="..." class="img-fluid">
                              <div class="status bg-green"></div>
                          </div>
                          <div class="client-title">
                              <h6 class="goods_name">{{$value['name']}}</h6>
                              @if($value['name']!=$value['description'])
                              <span>{{$value['description']}}</span>
                              @else
                              <br>
                              @endif
                          </div>
                          <div class="client-info">
                              <div class="row">
                                  <div class="col-6"><strong>{{$value['price']}}</strong><br><small>price</small></div>
                                  <div class="col-6"><strong>{{$value['comment_num']}}+</strong><br><small>评价人数</small></div>
                              </div>
                          </div>
                          <a href="{{$value['details_src']}}" target="_blank">查看更多</a>
                      </div>
                  </div>
                  @endforeach
              </div>
            </div>
            @component(component/page/page)
          <!-- Page Footer-->
            @component(shop/bottom)
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script src="js/goods.js"></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
  </body>
</html>